<template>
	<view class="pad_def pad_top">
		<view class="header_switc pad_def ">
			<u-toast ref="uToast" />
			<view class="box box-align-center box-pack-between">
				<view class="left">
					<view class="tit">
						浏览器功能总开关
					</view>
					<view class="sub_tit">
						开关关闭则学生平板端禁止使用系统浏览器
					</view>
				</view>
				<view class="right">
					<u-switch v-model="setting_browser" active-color="#5993ff" inactive-color="#e3e3e3"  @change="((val)=>{dataChange(val, 'setting_browser')})"></u-switch>
				</view>
			</view>
			<view class="box box-align-center box-pack-between pad_top_big">
				<view class="left">
					<view class="tit">
						浏览器地址栏开关
					</view>
					<view class="sub_tit">
						开关关闭则学生平板端无法手动修改浏览器地址
					</view>
				</view>
				<view class="right">
					<u-switch v-model="setting_browserInput" active-color="#5993ff" inactive-color="#e3e3e3"  @change="((val)=>{dataChange(val, 'setting_browserInput')})"></u-switch>
				</view>
			</view>
		</view>
		<view class="browser_def mar_top pad_big pad_top_big pad_bot_big">
			<view class="tit pad_bot">
				浏览器默认主页  设置部署
			</view>
			<view v-if="Object.keys(homePage).length===0" class="box-center-center">
				<u-button type="primary" size="medium" @click="isVisibleHomePage=true">添加</u-button>
			</view>
			<view class="box box-align-center" v-else @click="toEditHomePage()">
				<view class="icons">
					<image src="https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/browser.png" style="width: 50rpx;height: 50rpx;vertical-align: middle;"></image>
				</view>
				<view class="cont">
					<view>修改时间:<text>{{homePage.update_time}}</text></view>
					<view>浏览器当前默认主页:<text>{{homePage.home_page}}</text></view>
				</view>
			</view>
		</view>
		
		<view class="browser_def mar_top pad_big pad_top_big pad_bot_big">
			<view class="tit pad_bot">
				浏览器默认书签页  设置部署
			</view>
			<view v-if="Object.keys(homePage).length===0" class="box-center-center">
				<!-- <u-button type="primary" size="medium" @click="isVisibleLabel=true">添加</u-button> -->
				<view style="color: gray;">请先配置浏览器默认主页</view>
			</view>
			<view class="box box-align-center" v-else @click="toEditHomeLabel()">
				<view class="icons">
					<image src="https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/browser.png" style="width: 50rpx;height: 50rpx;vertical-align: middle;"></image>
				</view>
				<view class="cont">
					<view>修改时间：<text>{{homePage.update_time}}</text></view>
					<view v-for="(item,index) in labelForm.label_page" :key="index">
						<text>书签地址:{{item}}</text>
					</view>
				</view>
			</view>
		</view>
		
		<view class="browser_def mar_top pad_big pad_top_big pad_bot_big">
			<view class="tit pad_bot">
				网址白名单  设置部署
			</view>
			<view v-if="whiteList.length==0" class="box-center-center">
				<u-button type="primary" size="medium" @click="isVisibleWhite=true">添加</u-button>
			</view>
			<view v-else>
				<view class="box box-align-center pad_bot" v-for="(item,index) in whiteList" :key="index" @click="toEditWhite(item)">
					<view class="icons">
						<image src="https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/browser.png" style="width: 50rpx;height: 50rpx;vertical-align: middle;"></image>
					</view>
					<view class="cont">
						<view>修改时间:<text>{{whiteUpdateTime}}</text></view>
						<view>白名单:<text>{{item}}</text></view>
					</view>
				</view>
			</view>
		</view>
		
		<u-popup v-model="isVisibleHomePage" mode="center" border-radius="25" length="70%">
			<u-form  :model="homeForm" ref="uForm" style="margin: 40rpx;">
				<u-form-item label="默认主页:" label-width="150rpx" label-align="right" prop="home_page">
					<u-input v-model="homeForm.home_page"></u-input>
				</u-form-item>
			</u-form>
			<view style="display: flex; justify-content: space-between; padding-left: 30rpx; padding-right: 30rpx; padding-bottom: 30rpx;">
				<u-button v-if="editHomePage" @click="editBrowserHomeControl()" type="primary" shape="circle" :custom-style="customStyle">提交</u-button>
				<u-button v-else @click="addBrowserHomeControl()" type="primary" shape="circle" :custom-style="customStyle">提交</u-button>
				<u-button @click="isVisibleHomePage=false" shape="circle" :custom-style="customStyle">取消</u-button>
			</view>
		</u-popup>
		<u-popup v-model="isVisibleLabel" mode="center" border-radius="25" length="100%">
			<u-form :model="labelForm" ref="uLabelForm" style="margin: 40rpx;">
				<u-form-item v-for="(item, index) in labelForm.label_page" :key="index" label="书签:" label-width="150rpx" label-align="right" prop="home_page">
					<view style="display: flex; justify-content: space-between; align-items: center;">
						<u-input v-model="labelForm.label_page[index]"></u-input>
						<image src="https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/del.png" style="width: 40rpx;height: 40rpx;vertical-align: middle;" @click="removeLabelSort(item)"></image>
					</view>
				</u-form-item>
				<u-form-item  label-width="30rpx" label-align="right">
					<view @click="addLabelSort()" style="color: royalblue; padding-left: 30rpx;">继续添加书签</view>
				</u-form-item>
			</u-form>
			<view style="display: flex; justify-content: space-between; padding-left: 30rpx; padding-right: 30rpx; padding-bottom: 30rpx;">
				<u-button @click="editBrowserLabelControl()" type="primary" shape="circle" :custom-style="customStyle">提交</u-button>
				<u-button @click="isVisibleLabel=false" shape="circle" :custom-style="customStyle">取消</u-button>
			</view>
		</u-popup>
		
		<u-popup v-model="isVisibleWhite" mode="center" boder-radius="25" leght="100%" width="100%">
			<u-form :model="whiteForm" ref="uWhiteForm" style="margin: 40rpx;">
				<u-form-item v-for="(item, index) in whiteForm.white_addr" :key="index" label="白名单:" label-width="150rpx" label-align="right">
					<view style="display: flex; justify-content: space-between; align-items: center;">
						<u-input v-model="whiteForm.white_addr[index]"></u-input>
						<image src="https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/del.png" style="width: 40rpx;height: 40rpx;vertical-align: middle;" @click="removeWhiteList(item)"></image>
					</view>
				</u-form-item>
				<u-form-item  label-width="30rpx" label-align="right">
					<view @click="addWhiteList()" style="color: royalblue; padding-left: 30rpx;">继续添加网址白名单</view>
				</u-form-item>
			</u-form>
			<view style="display: flex; justify-content: space-between; padding-left: 30rpx; padding-right: 30rpx; padding-bottom: 30rpx;">
				<u-button v-if="editWhite" @click="editBrowserControl()" type="primary" shape="circle" :custom-style="customStyle">提交</u-button>
				<u-button v-else @click="addBrowserWhiteControl()" type="primary" shape="circle" :custom-style="customStyle">提交</u-button>
				<u-button @click="cancelWhite()" shape="circle" :custom-style="customStyle">取消</u-button>
			</view>
		</u-popup>
	</view>
</template>

<script>
import { getSetting, editSetting, addBrowserHomePage, getBrowserHomePage, editBrowserHomePage, editBrowserHomeLabel } from '../../api/systemControl';
import { addBrowserWhite, editBrowser, editBrowserWhite, getBrowser, getBrowserWhite } from '../../api/userHome';
	export default {
		data() {
			return {
				setting_browser: false,
				setting_browserInput: false,
				id: 0,
				homePage: {},
				isVisibleHomePage: false,
				editHomePage: false,
				homeForm: {
					home_page: ''
				},
				homePageRule: {
					home_page: [{required: true, message: '请输入主页地址', trigger: 'blur'}]
				},
				isVisibleLabel: false,
				editLabel: false,
				labelForm: {
					label_page: [""]
				},
				labelRule: {
					label_page: [{required: true, message: '请输入标签地址', trigger: 'blur'}]
				},
				whiteRule: {
					white_addr: [{required: true, message: '请输入网址', trigger: 'blur'}]
				},
				whiteList: [],
				whiteUpdateTime: "",
				browser_id: 0,
				isVisibleWhite: false,
				editWhite: false,
				whiteForm: {
					white_addr: [""]
				},
				customStyle: {
					magin: '0rpx',
					padding: '0rpx',
					width: '100rpx',
					height: '50rpx'
				}
			};
		},
		onLoad() {
			this.getSettingControl();
			this.getBrowserHomePage();
			this.getBrowserControl();
		},
		onReady() {
			this.$refs.uForm.setRules(this.homePageRule);
			this.$refs.uLabelForm.setRules(this.labelRule);
		},
		methods: {
			getSettingControl() {
				getSetting({
					id: uni.getStorageSync("snId")
				}).then(res => {
					let data = res.data
					this.id = res.data.id
					this.setting_browser = Boolean(data.setting_browser)
					this.setting_browserInput = Boolean(data.setting_browserInput)
				}).catch(err => {
					
				})
			},
			
			//修改系统管控信息
			dataChange(val, name) {
			    let editForm = {
					userId: uni.getStorageSync('userId'),
					lastIp: uni.getStorageSync('Ip'),
					name: name,
					value: Number(val),
					snId: uni.getStorageSync('snId'),
					id: this.id
				}
				editSetting(editForm).then(res => {
					this.getSettingControl()
					this.$refs.uToast.show({
						title: res.msg,
						icon: false,
						type: 'success'
					})
				}).catch(err => {
					this.$refs.uToast.show({
						title: err.msg,
						icon: false,
						type: 'error'
					})
					this.getSettingControl()
				})
			},
			getBrowserHomePage() {
				getBrowserHomePage({
					id: uni.getStorageSync("snId")
				}).then(res => {
					this.homePage = res.data
					this.labelForm.label_page = res.data.label_page
				}).catch(err => {
					this.homePage = {}
				})
			},
			addBrowserHomeControl() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						let addForm = JSON.parse(JSON.stringify(this.homeForm))
						addForm.userId = uni.getStorageSync('userId')
						addForm.id = uni.getStorageSync('snId')
						addForm.last_ip = uni.getStorageSync('Ip')
						addBrowserHomePage(addForm).then(res => {
							this.$refs.uToast.show({
								title: res.msg,
								type: 'success',
								icon: false
							})
							this.getBrowserHomePage()
						}).catch(err => {
							this.$refs.uToast.show({
								title: err.msg,
								type: 'error',
								icon: false
							})
						})
					} else {
						console.log('验证失败');
					}
				});
			},
			toEditHomePage() {
				this.isVisibleHomePage=true
				this.editHomePage=true
				this.homeForm.home_page=this.homePage.home_page
			},
			toEditHomeLabel() {
				this.isVisibleLabel=true
				this.editLabel=true
				// this.labelForm.label_page=thi
			},
			addLabelSort() {
				if (this.labelForm.label_page.length > 10) {
					this.$refs.uToast.show({
						title: '限制添加10条',
						type: 'info',
						icon: false
					})
				}else {
					this.labelForm.label_page.push("")
				}
			},
			removeLabelSort(item) {
				var index = this.labelForm.label_page.indexOf(item)
				if (index !== -1) {
					this.labelForm.label_page.splice(index, 1)
				}
			},
			editBrowserHomeControl() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						let addForm = JSON.parse(JSON.stringify(this.homeForm))
						addForm.userId = uni.getStorageSync('userId')
						addForm.id = uni.getStorageSync('snId')
						addForm.last_ip = uni.getStorageSync('Ip')
						addForm.label_id = this.homePage.id
						editBrowserHomePage(addForm).then(res => {
							this.isVisibleHomePage = false
							this.editHomePage = false
							this.$refs.uToast.show({
								title: res.msg,
								type: 'success',
								icon: false
							})
							this.getBrowserHomePage()
						}).catch(err => {
							this.$refs.uToast.show({
								title: err.msg,
								type: 'error',
								icon: false
							})
						})
					} else {
						console.log('验证失败');
					}
				});
			},
			editBrowserLabelControl() {
				if (this.homePage.id == undefined) {
					this.$refs.uToast.show({
						title: '请先设置默认主页',
						type: 'info',
						icon: false
					});
					return
				}
				this.$refs.uLabelForm.validate(valid => {
					if (valid) {
						let addForm = JSON.parse(JSON.stringify(this.labelForm))
						addForm.userId = uni.getStorageSync('userId')
						addForm.id = uni.getStorageSync('snId')
						addForm.last_ip = uni.getStorageSync('Ip')
						addForm.label_id = this.homePage.id
						editBrowserHomeLabel(addForm).then(res => {
							this.isVisibleLabel = false
							this.editHomePage = false
							this.$refs.uToast.show({
								title: res.msg,
								type: 'success',
								icon: false
							})
							this.getBrowserHomePage()
						}).catch(err => {
							this.$refs.uToast.show({
								title: err.msg,
								type: 'error',
								icon: false
							})
						})
					} else {
						console.log('验证失败');
					}
				});
			},
			getBrowserControl() {
				getBrowserWhite({
					id: uni.getStorageSync("snId")
				}).then(res => {
					this.whiteList = res.data.whiteList
					this.whiteUpdateTime = res.data.update_time
					this.whiteForm.white_addr = res.data.whiteList
					this.browser_id = res.data.id
				}).catch(err => {
					this.whiteList = []
				})
			},
			toEditWhite(item) {
				this.isVisibleWhite = true
				this.editWhite = true
			},
			editBrowserControl() {
				if (this.whiteForm.white_addr.length == 0) {
					this.$refs.uToast.show({
						title: "请至少输入一项网址白名单",
						type: 'error',
						icon: false
					})
					return
				}
				let editForm = JSON.parse(JSON.stringify(this.whiteForm))
				editForm.userId = uni.getStorageSync('userId')
				editForm.id = uni.getStorageSync('snId')
				editForm.last_ip = uni.getStorageSync('Ip')
				editForm.browser_id = this.browser_id
				editBrowserWhite(editForm).then(res => {
					this.isVisibleWhite = false
					this.editWhite = false
					this.$refs.uToast.show({
						title: res.msg,
						type: 'success',
						icon: false
					})
				}).catch(err => {
					this.$refs.uToast.show({
						title: err.msg,
						type: 'error',
						icon: false
					})
				})
			},
			addBrowserWhiteControl() {
				if (this.whiteForm.white_addr.length == 0) {
					this.$refs.uToast.show({
						title: "请至少输入一项网址白名单",
						type: 'error',
						icon: false
					})
					return
				}
				let addForm = JSON.parse(JSON.stringify(this.whiteForm))
				addForm.userId = uni.getStorageSync('userId')
				addForm.id = uni.getStorageSync('snId')
				addForm.last_ip = uni.getStorageSync('Ip')
				addBrowserWhite(addForm).then(res => {
					this.isVisibleWhite = false
					this.$refs.uToast.show({
						title: res.msg,
						type: 'success',
						icon: false
					})
					this.getBrowserControl()
				}).catch(err => {
					this.$refs.uToast.show({
						title: err.msg,
						type: 'error',
						icon: false
					})
				})
			},
			addWhiteList() {
				if (this.whiteForm.white_addr.length > 10) {
					this.$refs.uToast.show({
						title: '限制添加10条',
						type: 'info',
						icon: false
					})
				}else {
					this.whiteForm.white_addr.push("")
				}
			},
			removeWhiteList(item) {
				var index = this.whiteForm.white_addr.indexOf(item)
				if (index !== -1) {
					this.whiteForm.white_addr.splice(index, 1)
				}
			},
			cancelWhite() {
				this.isVisibleWhite=false
				this.getBrowserControl()
			}
		}
	}
</script>

<style lang="scss" scoped>
.header_switc{
	border-radius: 30rpx;
	background: #5070b9;
	padding: 50rpx 40rpx;
	.left{
		width: 80%;
		.tit{
			font-size: 30rpx;
			color: #fff;
		}
		.sub_tit{
			font-size: 24rpx;
			color: #7d9ce1;
		}
	}
}
.browser_def{
	background-color: #fff;
	border-radius: 30rpx;
	.tit{
		font-size: 32rpx;
	}
	.cont{
		padding-left: 10rpx;
		font-size: 26rpx;
	}
}
</style>
